<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>港口无人化协同作业可视化管理平台</title>
    <base href="/">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="logo">港口无人化协同作业平台</div>
            <ul class="nav-links">
                <li><a href="/index.html" class="active">首页</a></li>
                <li><a href="/page2.html">作业管理</a></li>
                <li><a href="/page3.html">设备监控</a></li>
                <li><a href="/page4.html">数据分析</a></li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 数据概览卡片 -->
            <div class="overview-cards">
                <div class="card">
                    <h3>今日作业量</h3>
                    <div class="card-content">
                        <span class="number" id="todayWorkload">0</span>
                        <span class="unit">TEU</span>
                    </div>
                </div>
                <div class="card">
                    <h3>在线设备数</h3>
                    <div class="card-content">
                        <span class="number" id="onlineDevices">0</span>
                        <span class="unit">台</span>
                    </div>
                </div>
                <div class="card">
                    <h3>作业效率</h3>
                    <div class="card-content">
                        <span class="number" id="efficiency">0</span>
                        <span class="unit">%</span>
                    </div>
                </div>
                <div class="card">
                    <h3>安全指数</h3>
                    <div class="card-content">
                        <span class="number" id="safetyIndex">0</span>
                        <span class="unit">分</span>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-container">
                <div class="chart-box">
                    <h3>24小时作业量趋势</h3>
                    <div id="workloadChart" class="chart"></div>
                </div>
                <div class="chart-box">
                    <h3>设备状态分布</h3>
                    <div id="deviceStatusChart" class="chart"></div>
                </div>
            </div>

            <!-- 实时数据表格 -->
            <div class="table-container">
                <h3>实时作业数据</h3>
                <table id="realtimeData">
                    <thead>
                        <tr>
                            <th>作业编号</th>
                            <th>设备类型</th>
                            <th>状态</th>
                            <th>开始时间</th>
                            <th>预计完成时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="realtimeDataBody">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <script src="/data.js"></script>
    <script src="/script.js"></script>
</body>

</html>